<template>
    <main class="container">
        <article>
            <h3>事件清单</h3>
            <input type="text" 
            v-model="newToDo" 
            placeholder="请输入待办事件" 
            aria-invalid="false"
            @keyup.enter="addToDoList()">

            <i>{{ toDoNum }}项</i>
            <details open>
              
              <summary>待办事项:</summary>
              
              <fieldset>
                <!--做for循环的时候每一个项应该有一个唯一的key -->
                <label for="terms" v-for="item in filterWaiting" :key="item.id">
                  <input type="checkbox" :id="'todo'+item.id.toString()" 
                  :name="'todo'+item.id.toString()" v-model="item.done">
                  {{item.text}}
                  <a href="#" role="button" class="outline contrast" id="deletebt" @click="removeItem(item.id)">x</a>
                </label>
              </fieldset>
            </details>

            <hr/>

            <i>{{ doneNum }}项</i>
            <details open>
              <summary>办结事项:</summary>
              <fieldset>
                <label for="terms_sharing" v-for="item in filterDone" :key="item.id">
                  <input type="checkbox" :id="'todo'+item.id.toString()" 
                  :name="'todo'+item.id.toString()" v-model="item.done"
                  disabled checked>
                  {{item.text}}
                  <a href="#" role="button" class="outline contrast" id="deletebt" @click="removeItem(item.id)">x</a>
                </label>
              </fieldset>
            </details>
        </article>
    </main>
</template>

<script setup lang="ts">
    //computed计算属性
    import {computed, ref,onMounted,watch} from 'vue'
    //定义一个自增id变量
    let id:number=0;
    type toDoItem={
        id:number,//id属性
        text:string,
        done:boolean
    }
    //待办列表
    const todos=ref<toDoItem[]>(JSON.parse(localStorage.getItem('todos') || '[]'));
    
    //定义待办和已完成的数量
    let toDoNum=ref(0);
    let doneNum=ref(0);

    //新加入的待办事项
    const newToDo=ref("");
    //新增一个待办事项的函数实现
    function addToDoList(){
        console.log(newToDo.value);
        todos.value.push({
            id:id++,
            text:newToDo.value,
            done:false
        });
        newToDo.value="";
        toDoNum.value++;
    }
    //根据id删除todos中的元素
    function removeItem(id:number){
        const rs=todos.value.filter(item=>item.id!==id)
        todos.value=rs;
        toDoNum.value--;
        doneNum.value--;

    }
    

    //这是真正的待完成的列表
    const filterWaiting=computed(()=>{
      const rs=todos.value.filter((item)=>!item.done)//将未勾选的过滤出来，留下勾选的
      toDoNum.value=rs.length;
      return rs;
    });
  

    //这是真正的已经完成的列表
    const filterDone=computed(()=>{
      const rs=todos.value.filter((item)=>item.done)//将勾选的过滤出来，留下未勾选的
      doneNum.value=rs.length;
      return rs;
    });

    /* 监听 todos 数据变化，并同步更新到 localStorage */
    watch(todos, (newTodos) => {
        localStorage.setItem('todos', JSON.stringify(newTodos))
    }, { deep: true })
    /* 更新自增 ID */
    id = todos.value.length > 0 ? Math.max(...todos.value.map(item => item.id)) + 1 : 0

    /* 页面加载时恢复数据 */
    onMounted(() => {
        const storedTodos = localStorage.getItem('todos')
        if (storedTodos) {
            todos.value = JSON.parse(storedTodos)
        }
    })


</script>

<style scoped>
#deletebt{
    padding: 0px 5px;
    margin-left: 30em;
    font-size: 0.5em;

}
i{
  font-size: 14px;
  color: #999d9f;
}
</style>